<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div+css</title>
    <style>
         .col-left {
              float: left;
         }

         .col-right{
              float: left;
         }
    </style>
</head>
<body>

<!--
    1. 文本流
       1) 元素 自 左上 向 右下 自然排列
       2) 元素分为两个基本类型： 块级元素 和 行内元素
            行内元素 ： 自左上向右下 自然排列;一般不可以调整宽高   ---span
            块级元素： a. 独占一行;b.自带换行符;c.一般可以调整宽高---div
-->

<div>box1</div>
<div>box2</div>
<div>box3</div>

<span>span1</span>
<span>span2</span>
<span>span3</span>
<hr>
<div>row1</div>
<div>
    <div class="col-left">col-left</div>
    <div class="col-right">col-right</div>
</div>



</body>
</html>